少量JQuery+CSS3代码实现轮播器 (初次写文章，思路，文笔都不足，轻喷)

1.前言，看过很多的轮播器代码；但是心中，老想着有没有简单的办法来实现同样的效果。搜到这个（下方链接），眼前一亮，便动手实践改进。主要工作，还是对文章第一段提出的“如果中间间隔有图片，那么在css3动画的执行过程中还是会看到，比较不给力”问题，进行改进，以及实现自动轮播。
不知道是哪位大神写出来的，也不知道后续有没有更新解决方案，总之，没搜到，于是，献丑贴代码吧。

使用html5+css3来实现slider切换效果告别javascript+css链接描述

2.源码链接里有，这里只说改变的地方，和自己写的代码。

  2.1 将CSS样式处，#slidebrs .inner处的过渡动画取出，改为新的animated类，代码

@charset utf-8;
            /* common */
            
            body {
                background: #ddd;
                overflow-x: hidden;
            }
            
            img {
                max-width: 70%;
            }
            
            #bd {
                width: 960px;
                margin: 100px auto;
                max-width: 960px;
            }
            /* module: sliders */
            
            #sliders {
                border-radius: 5px;
                box-shadow: 1px 1px 4px #666;
                padding: 1%;
                background: #fff;
            }
            
            #overflow {
                width: 100%;
                overflow: hidden;
            }
            
            #sliders .inner {
                width: 500%;
                cursor: pointer;
            }
            
            .animated {
                transiton: all 1s linear;
                -webkit-transition: all 1s linear;
            }
            
            #sliders article {
                float: left;
                width: 20%;
            }
            
            #sliders article .info {
                position: absolute;
                opacity: 0;
                padding: 30px;
                color: #666;
                font-family: Arial;
                transition: opacity 0.1s ease-out;
                -webkit-transform: translateZ(0);
                -webkit-transition: opacity 0.1s ease-out;
            }
            
            #sliders article .info h1 {
                font-size: 22px;
                font-weight: bold;
                margin: 0 0 5px;
            }
            
            #sliders article .info a {
                color: #666;
                text-decoration: none;
            }
            /* module: controls */
            
            #controls {
                height: 50px;
                width: 100%;
                margin-top: -25%;
            }
            
            #controls label {
                display: none;
                width: 50px;
                height: 50px;
                opacity: 0.3;
                cursor: pointer;
            }
            
            #controls label:hover {
                opacity: 1;
            }
            /* module: active */
            
            #active {
                width: 40%;
                margin: 23% auto 0 auto;
                text-align: center;
            }
            
            #active label {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background: #bbb;
                border-color: #777;
            }
            
            #active label:hover {
                background: #ccc;
            }
            /* input checked change style */
            
            #slider1:checked~ #active label:nth-child(1),
            #slider2:checked~ #active label:nth-child(2),
            #slider3:checked~ #active label:nth-child(3),
            #slider4:checked~ #active label:nth-child(4),
            #slider5:checked~ #active label:nth-child(5) {
                background: #333;
            }
            
            #slider1:checked~ #controls label:nth-child(5),
            #slider2:checked~ #controls label:nth-child(1),
            #slider3:checked~ #controls label:nth-child(2),
            #slider4:checked~ #controls label:nth-child(3),
            #slider5:checked~ #controls label:nth-child(4) {
                display: block;
                float: left;
                background: url(../img/prev.png) no-repeat;
                margin-left: -70px;
            }
            
            #slider1:checked~ #controls label:nth-child(2),
            #slider2:checked~ #controls label:nth-child(3),
            #slider3:checked~ #controls label:nth-child(4),
            #slider4:checked~ #controls label:nth-child(5),
            #slider5:checked~ #controls label:nth-child(1) {
                display: block;
                float: right;
                background: url(../img/next.png) no-repeat;
                margin-right: -70px;
            }
            
            #slider1:checked~ #sliders article:nth-child(1) .info,
            #slider2:checked~ #sliders article:nth-child(2) .info,
            #slider3:checked~ #sliders article:nth-child(3) .info,
            #slider4:checked~ #sliders article:nth-child(4) .info,
            #slider5:checked~ #sliders article:nth-child(5) .info {
                opacity: 1;
                transition: all 0.6s ease-out 1s;
                -webkit-transition: all 0.6s ease-out 1s;
            }
            
            #slider1:checked~ #sliders .inner {
                margin-left: 0;
            }
            
            #slider2:checked~ #sliders .inner {
                margin-left: -100%;
            }
            
            #slider3:checked~ #sliders .inner {
                margin-left: -200%;
            }
            
            #slider4:checked~ #sliders .inner {
                margin-left: -300%;
            }
            
            #slider5:checked~ #sliders .inner {
                margin-left: -400%;
            }

也有其它有些小样式变化,比如，inner添加了cursor:pointer；
还在HTML中input标签全添加了hidden属性，用于隐藏一个小BUG，BUG结尾有说，但影响不大。

  2.2 以下是jQuery代码，版本2.1.4 ，手打代码，出错莫怪。

<div id="bd">
            <input checked type="radio" name="slider" id="slider1">
            <input type="radio" name="slider" id="slider2">
            <input type="radio" name="slider" id="slider3">
            <input type="radio" name="slider" id="slider4">
            <input type="radio" name="slider" id="slider5">
            <div id="sliders">
                <div id="overflow">
                    <div class="inner">
                        <article>
                            <div class="info">
                                <h1>Title1</h1>
                                <a href="#">Description1</a>
                            </div>
                            <img src="img/1.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title2</h1>
                                <a href="#">Description2</a>
                            </div>
                            <img src="img/2.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title3</h1>
                                <a href="#">Description3</a>
                            </div>

                            <img src="img/3.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title4</h1>
                                <a href="#">Description4</a>
                            </div>
                            <img src="img/4.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title5</h1>
                                <a href="#">Description5</a>
                            </div>
                            <img src="img/2.jpg" />
                        </article>
                    </div>
                </div>
            </div>
            <div id="controls">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
                <label for="slider5"></label>
            </div>
            <div id="active">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
                <label for="slider5"></label>
            </div>
        </div>

$(function() {
                var $input = $("input");
                var $inner = $input.siblings("#sliders").find(".inner");
                var $article = $("article");
                var $prevDom = $("input:checked");
                var $prevDomIndex = $("input:checked").index();

                $input.each(function() {
                    var _this = $(this);
                    _this.on("click", function() {
                        var _index = _this.index();
                        $inner.addClass("animated");
                        if($prevDom[0].id != ("slider" + _index) && $prevDom[0].id != ("slider" + (_index + 2))) { //如果点击图片间隔一个及以上，取消动画过程。不会闪闪闪眼睛。。
                            $inner.removeClass("animated");
                        }
                        $prevDom = _this;
                        $prevDomIndex = _index;
                    });
                });
                var timer = setInterval(autoAnimate, 3000);

                $article.on("mouseover", function() {
                    clearInterval(timer);
                }).on("mouseout", function() {
                    timer = setInterval(autoAnimate, 3000);
                });
                
                function autoAnimate() {
                    if($prevDomIndex == $input.length - 1) {
                        $input.eq($prevDomIndex).prop("checked", false);
                        $inner.removeClass("animated");
                        $input.eq(0).prop("checked", true);
                    } else {
                        $inner.addClass("animated");
                        $prevDom.prop("checked", false).next("input").prop("checked", true);
                    }
                    $prevDom = $("input:checked");
                    $prevDomIndex = $("input:checked").index();
                }

            })

3.结语，小BUG就是，删除input标签的hidden属性；执行以下顺序，在input标签组上，若点击间隔为一个及以上，下一次点击相邻图片时，不会出现动画。 但是下方laber标签就没有这个BUG，没有去想。 匆匆结束，代码肯定也可以优化。
收获就是,深深认识到了CSS3中“~“选择符的厉害之处，以及laber input的灵活运用。

肯定还有其它解决思路，献丑，求抱大神大腿，求大神指点。